A veces quieres mostrar el resultado de una celda, pero no mostrar el código. Por ejemplo, con el código de un gráfico o de una tabla.

Hay 2 maneras de cumplir con este objetivo:

Simple: creando función auxiliar y ejecutándola.
No tan simple: usando un poco de magia de jupyter notebook.

Opción Simple:

Podemos definir la función en un archivo, y luego importarla y ejecutarla:

from mi_carpeta import mi_script
mi_script.mi_grafico(order=6)

Si es necesario, es posible mostrar el contenido del script o la función:

!cat mi_carpeta/mi_script.py

# Tomado y adaptado desde:
# https://matplotlib.org/stable/gallery/lines_bars_and_markers/fill.html

import numpy as np
import matplotlib.pyplot as plt

def koch_snowflake(order, scale=10):
    """
    Return two lists x, y of point coordinates of the Koch snowflake.

    Parameters
    ----------
    order : int
        The recursion depth.
    scale : float
        The extent of the snowflake (edge length of the base triangle).
    """
    def _koch_snowflake_complex(order):
        if order == 0:
            # initial triangle
            angles = np.array([0, 120, 240]) + 90
            return scale / np.sqrt(3) * np.exp(np.deg2rad(angles) * 1j)
        else:
            ZR = 0.5 - 0.5j * np.sqrt(3) / 3

            p1 = _koch_snowflake_complex(order - 1)  # start points
            p2 = np.roll(p1, shift=-1)  # end points
            dp = p2 - p1  # connection vectors

            new_points = np.empty(len(p1) * 4, dtype=np.complex128)
            new_points[::4] = p1
            new_points[1::4] = p1 + dp / 3
            new_points[2::4] = p1 + dp * ZR
            new_points[3::4] = p1 + dp / 3 * 2
            return new_points

    points = _koch_snowflake_complex(order)
    x, y = points.real, points.imag
    return x, y

def mi_grafico(order=5, figsize=(12,8)):
    """
    Plots the koch snowflake.
    
    Parameters
    ----------
    order : int
        The recursion depth.
    scale : float
        The extent of the snowflake (edge length of the base triangle).
    """
    x, y = koch_snowflake(order=order)
    plt.figure(figsize=figsize)
    plt.axis('equal')
    plt.fill(x, y)
    plt.show()

Opción 2:

Usando una función específica para ocultar código, creada con una mezcla de html y javascript.

def toggle_cell_code(button_id):
    """
    Adds a button to toggle (show/hide) the code cell but not the output. 
    
    Parameters
    ----------
    button_id : str
        An identifier for cells that will hide/show when button is pressed.
    """
    
    from IPython.display import display_html
    my_html = '''
    <button type="button" id="%s" onclick="code_toggle('%s')">Codigo</button>
    <script>
    function code_toggle(my_id) {
        // get the parent element for the cell code and output
        var p = $("#"+my_id);
        if (p.length==0) return;
        while (!p.hasClass("cell")) {
            p = p.parent();
            if (p.prop("tagName") =="body") return;
        }
    // get the cell code and toggle its value
    var cell_code = p.find(".input");
    cell_code.toggle();
    }
    </script>
    ''' %(button_id, button_id)
    return display_html(my_html, raw=True)

Para usar esta funcionalidad, basta con incluirla en la celda del código (antes o después), para agregar el botón que permitirá ocultar y mostrar el código.

toggle_cell_code("un_string_unico_y_reconocible")

# Código para graficar
import numpy as np
import matplotlib.pyplot as plt

# Fixing random state for reproducibility
np.random.seed(19680801)


N = 50
x = np.random.rand(N)
y = np.random.rand(N)
colors = np.random.rand(N)
area = (30 * np.random.rand(N))**2  # 0 to 15 point radii

plt.scatter(x, y, s=area, c=colors, alpha=0.5)
plt.show()

Así se ve:

¿Cómo funciona?

Analicemos el código en python que ejecuta la función toggle_cell_code:

Primero:

def toggle_cell_code(button_id):

La función toma un único argumento: button_id.

Segundo:

from IPython.display import display_html

Tercero:

my_html = '''
    Mucho código en html acá que analizaremos después...
    ''' %(button_id, button_id)

Este código define la variable my_html, en la cual se inserta 2 veces el valor button_id.

Cuarto:

return display_html(my_html, raw=True)

Finalmente, se regresa como el display del html creado mediante una función de IPython.display.

Analicemos ahora el código html:

Primero:

<button type="button" id="%s" onclick="code_toggle('%s')">Codigo</button>

El código anterior define un botón, con un identificador único (button_id) cuyo valor se define de manera dinámica (en el momento de ejecutar la celda del notebook). Al apretar el botón ejecuta la función code_toggle() con el mismo identificador (button_id) como argumento. Eso permite que la función en javascript sepa cuál es la celda en específico que debe ocultar.

Segundo:

<script>
    function code_toggle(my_id) {
        // get the parent element for the cell code and output
        var p = $("#"+my_id);
        if (p.length==0) return;
        while (!p.hasClass("cell")) {
            p = p.parent();
            if (p.prop("tagName") =="body") return;
        }
    // get the cell code and toggle its value
    var cell_code = p.find(".input");
    cell_code.toggle();
    }
    </script>

Primero que nada, $ (jquery) permite encontrar los elementos en una página web, en este caso, el elemento asociado al identificador entregado (button_id). Luego se itera hasta encontrar el elemento que contiene la celda de código y el output (se identifica porque tiene clase "cell"). Luego se accede a la celda de código (que siempre la clase "input"). Finalmente, toggle muestra/oculta el botón.

Nota:

Los identificadores tienen el caracter especial #
Las clases tienen el carácter especial .

Todas estas ideas son una compilación y simplificación de códigos de muchas otras personas. Algunos enlaces relevantes son:

Poner un video en markdown o jupyter notebook es sencillo, pero hay varias opciones y no todas funcionan. ¡La opción que pongo acá funciona en todos los casos!

¿Cómo se ponen videos en un notebook?

Es posible usar un video en local (de tu disco duro) o en línea. Sin embargo, resulta aconsejable subir el video en línea y enlazar ese video. ¿Por qué? Porque así la ruta no cambia al ejecutarlo como notebook en local y al convertirlo mediante fastpages en página web.

Usaremos el video que usan de ejemplo en w3school: mov_bbb.mp4

Agregando el repositorio en github, obtenemos la ruta del archivo (notar que tiene que estar en version raw):

https://github.com/sebastiandres/blog/blob/master/videos/mov_bbb.mp4?raw=true

El código html para incrustar un video en html o markdown es:

<video controls src="path_to/video_name.mp4" width="800"></video>

Podemos usar el html en una celda de markdown:

También es posible usar código en python para incrustar el video como resultado de la ejecución de una celda:

from IPython.display import HTML

HTML("""
<video controls src="https://github.com/sebastiandres/blog/blob/master/videos/mov_bbb.mp4?raw=true" width="800">
</video>""")

Todas las opciones del tag <video> están en la documentación.

Creo que existe poco material sobre cómo utilizar la librería RISE, especialmente en español. En esta serie de artículos dedicados espero poder contribuir a disminuir esa brecha.

Si encuentras errores o existe alguna funcionalidad no documentada, ¡no dudes en comentar!

¿Qué es RISE?

RISE es una extensión a los jupyter notebooks que permite transformarlos en una presentación interactiva. Toda las celdas pueden editarse y ejecutarse directamente, durante la presentación. Esto es práctico si necesitas corregir un error en una celda de texto. Más importante aún, puedes ejecutar código directamente en el kernel. En una misma diapositiva puedes tener múltiples celdas y elegir cuál ejecutar, o corregir el texto y volver a ejecutar.

¿Porqué es mejor?

Primero, porque simplifica enormemente la generación de material. El jupyter notebook es simultáneamente la presentación, el código, el apunte y texto oficial, y no necesitas actualizar en múltiples lugares. Detesto sacar una captura de pantalla a un trozo de código, porque tendré que estar eternamente actualizando esa imagen. También odio escribir código en cuadros de texto que quedan sin formato y donde siempre se pasa algún error, que no se detecta porque el código no se puede ejecutar.

Segundo, porque simplifica la distribución del material. La presentación contiene todo lo que la audiencia necesita: explicaciones, imágenes, videos y/o código. Proporcionando un archivo requirements.txt es fácil recrear un ambiente con las librerías necesarias para ejecutar el código. Almacenando el jupyter notebook en github, es además fácil compartir el archivo ipynb del jupyter notebook, un html o pdf pre-generado fácil de visualizar o incluso un enlace a un repositorio binder donde la presentación se puede volver a visualizar de manera interactiva. Entregar múltiples opciones le entrega facilidades a la audiencia y permite generar más impacto.

¿Qué desventajas tiene?

La principal desventaja es que actualmente RISE funciona únicamente con Jupyter Notebook.

No funciona con Jupyter Lab (aún) ni con Google Colaboratory (probablemente nunca).

Sobre el tutorial

Como el jupyter notebook se transforma en una presentación, se heredan todas las funcionalidades, tanto de texto (markdown, latex) como de código (gráficos, display, widgets) del formato jupyter notebook. Probablemente ya conoces muchas de estas funcionalidades que no son de RISE. En el enlace podrás encontrar estas funcionalidades de jupyter notebook útiles para presentaciones interactivas.

En este tutorial se divide en tres partes:

Aspectos básico: Cómo instalar la librería, cómo crear una presentación y cómo realizar una presentación exitosa.
Aspectos intermedios: Cómo configurar el diseño en RISE y cómo compartir tu presentación.
Aspectos avanzados: Cómo crear columnas, cómo realizar encuestas, cómo portar una presentación de powerpoint a jupyter notebook y otros consejos.

Enlaces:

Documentación oficial de RISE.
Charla en PyCon Colombia 2020 donde hablo de RISE y cómo hacer encuestas.
Otras charlas y eventos donde uso librería RISE.

Esta es la parte 3 de 3 del tutorial de presentaciones interactivas en jupyter notebook.

¿Cómo puedo configurar texto y columnas?

Como las celdas de markdown aceptan html, es posible usar todos sus trucos. Uno de éstos permite generar dos columnas, típicamente para tener una columna con texto y otra con una imagen (estática o gif).

Por ejemplo, el siguiente código en html se puede usar en celdas de markdown

<div>
    <div style="display: inline-block;  width: 40%;">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
    </div>
    <div style="display: inline-block; vertical-align: text-top; width: 50%;">
    <img src="2021-08-03-tutorial-rise-parte-3/columnas.gif" alt="LoreIpsum">
    </div>
</div>

y proporciona la siguiente imagen:

Pero en general, hay que segur el consejo: keep it simple.

Gastar 1 hora en una slide de 1 minuto es una mala inversión.

Convierte tus presentaciones automáticamente

Uno de los primeros desafíos para comenzar a usar notebook + rise es convertir el contenido de las presentaciones que ya están en powerpoint. Para solucionar eso, creé un sitio que permite convertir una presentación powerpoint a jupyter notebook + rise de manera automática. Ya genera texto e imagen a 2 columnas, como es el caso habitual en diapositivas. No es perfecto, pero te ahorrará un buen tiempo de copiar y pegar texto.

La aplicación para convertir se encuentra en este enlace: pptx a rise

El funcionamiento es el siguiente. Supongamos que tienes una presentación que necesitas convertir: simple.pptx

Primero que nada, en el sitio debes cargar la presentación, esperar que se convierta y descargar el notebook + RISE equivalente:

Después de descargar y descomprimir, al lanzar el notebook en jupyter la presentación debería comenzar de inmediato:

Observación 1: El notebook que se obtiene es el punto de partida para editar la presentación. Puedes agregarle más contenido y código, y personalizar el diseño tanto como desees.

Observación 2: Si no lo has hecho antes, deberás instalar jupyter notebook y RISE, obviamente.

Ocultando código

A veces quieres ejecutar una celda pero no mostrar largas filas de código.

Hay 2 formas de hacerlo:

Simple: creando función auxiliar y ejecutándola.
No tan simple: usando un poco de magia de jupyter notebook.

Opción Simple:

Podemos definir la función en un archivo, y luego importarla y ejecutarla:

from mi_carpeta import mi_script
mi_script.mi_grafico(order=6, figsize=(12,8))

Opción 2:

Usando una función específica para ocultar código, creada con una mezcla de html y javascript.

def toggle_cell_code(button_id):
    """
    Adds a button to toggle (show/hide) the code cell but not the output. 
    
    Parameters
    ----------
    button_id : str
        An identifier for cells that will hide/show when button is pressed.
    """
    
    from IPython.display import display_html
    my_html = '''
    <button type="button" id="%s" onclick="code_toggle('%s')">Codigo</button>
    <script>
    function code_toggle(my_id) {
        // get the parent element for the cell code and output
        var p = $("#"+my_id);
        if (p.length==0) return;
        while (!p.hasClass("cell")) {
            p = p.parent();
            if (p.prop("tagName") =="body") return;
        }
    // get the cell code and toggle its value
    var cell_code = p.find(".input");
    cell_code.toggle();
    }
    </script>
    ''' %(button_id, button_id)
    return display_html(my_html, raw=True)

Y así se ve en el código:

toggle_cell_code("un_string_unico_y_reconocible")

# Código para graficar
import numpy as np
import matplotlib.pyplot as plt

# Fixing random state for reproducibility
np.random.seed(19680801)


N = 50
x = np.random.rand(N)
y = np.random.rand(N)
colors = np.random.rand(N)
area = (30 * np.random.rand(N))**2  # 0 to 15 point radii

plt.scatter(x, y, s=area, c=colors, alpha=0.5)
plt.show()

Así se ve:

hide_code()
print("Hmmm444")

886216a64d679f3b

Hmmm444

¿Cómo puedo hacer actividades interactivas?

Para incluir actividades interactivas, como las que se pueden hacer con https://www.mentimeter.com/, https://kahoot.com/ o https://quizizz.com/ (entre otros), es posible tomar varios caminos.

Lo más simple es incluir una diapositiva con el enlace al que tiene que acceder los usuarios, idealmente con un código QR para facilitar el acceso desde smartphones. Luego simplemente te cambias a la página correspondiente para mirar los resultados y compartirlos en pantalla.

Otra opción es no salir del jupyter notebook e incrustar la página web de los resultados. Para eso, es posible usar IFrames en una celda de código. De esa manera, es posible embeber dentro del notebook y una diapositiva una página web con una actividad.

from IPython.display import IFrame
IFrame("https://es.wikipedia.org/wiki/Iframe", width=600, height=450)

Importante:

Comparte un enlace y código QR del url al que debe acceder tu audiencia.
En una diapositiva, mediante IFrame, muestra lo que tu audiencia debería ver en sus celulares o computadores.
En otra diapositiva, mediante otro IFrame, coloca el resultado de la actividad interactiva que debería irse completando a medida que la gente responda.

Ahora bien, puede suceder que la página que desees incrustar con IFrames no lo permita, así que siempre realiza pruebas antes de tu presentación.

¿Cómo hacer encuestas?

Es muy importante recibir retroalimentación de la presentación para poder mejorar.

Recomiendo hacer 3 preguntas simples al finalizar toda presentación:

¿Qué te pareció la charla? Evaluar de 1 a 5.
¿Qué le agregarías a la charla?
¿Qué le sacaríias a la charla?

Esto puedes lograrlo embebiendo una encuesta de Google Forms, Microsoft Forms u otros mediante un IFrame.

from IPython.display import IFrame
IFrame("https://forms.office.com/Pages/ResponsePage.aspx?id=zu7OdUTRPU-clJ5rQCX8_4qs5cX1Y7dFhVdiCz848sBUOTVJWktZQlBVNVJDNTg4OVA1N1JaMVlSNS4u", 
       width=450, height=600)

Usa un teclado inalámbrico

En charlas y clases resulta cómodo tener un teclado y mouse inalámbrico. Esto permite que no tengas que estar cerca del notebook, de esa manera puedas moverte libremente por el escenario.

Resulta práctico también para crear la posibilidad que un asistente de la charla pueda editar una celda de código. ¡Esto es especialmente entretenido en una clase!

Esta es la parte 2 de 3 del tutorial de presentaciones interactivas en jupyter notebook.

¿Cómo puedo compartir la presentación?

Compartir la presentación suele ser uno de los pasos más importantes y sencillos. Existen muchas opciones: compartir el código en un repositorio, mediante mybinder de manera completamente interactiva, como html estático o como pdf.

Repositorio

No trabajes en local. Siempre es más conveniente ir versionando los archivos mediante git en un repositorio. Ese repositorio puede respaldarse en línea, en un proveedor como github, bitbucket, gitlab o tu u otro de tu preferencia. El proveedor github es una buena opción gratuita que tiene muchas integraciones y complementos.

Asegúrate de tener un archivo requirements.txt que contenga las librerías que se requieren para poder ejecutar las distintas celdas de código de tu presentación. No olvides incluir todo el código, datos e imágenes.

Resulta útil tener un archivo README.md con la descripción del repositorio, y enlaces a las distintas opciones de visulización para el archivo.

En github, para un usuario nombre_usuario en un repo nombre_repo, puedes además crear una página index.html , y de esa manera al activar "Gitub Pages" la página estará accesible en https://nombre_usuario.github.io/nombre_repo/. De manera más general, un archivo en la ruta /ruta_carpetas/nombre_archivo.html se visualizará en https://nombre_usuario.github.io/nombre_repo/ruta_carpetas/nombre_archivo.html.

Yo he diseñado un template con un formato fijo que reutilizo para las distintas presentaciones, y que así se ve para una de mis charlas (Pycon Colombia 2020):

Creé el formato para para emular a linktree, de manera de reutilizarlo con mínimo esfuerzo. Escribí al respecto en este post.

mybinder

Binder es un servicio que permite lanzar un jupyter notebook en el navegador y en la nube, sin consumir recursos de tu computador y de manera completamente gratuita. Resulta práctico para que otras personas pueden ver la presentación de manera interactiva sin tener que instalar nada en su computador, ¡incluso desde un smartphone o tablet!

Para usar mybinder, debes tener tu repositorio en github.

En Binder puedes introducir los distintos parámetros:

Usuario github: nombre_usuario
Nombre repositorio: nombre_repositorio
Nombre de la rama del repositorio: nombre_rama
Ruta al archivo: ruta_carpetas
Nombre del archivo: nombre_archivo.ipynb
En la rama, en el directorio principal, debe existir el archivo requirements.txt

Al acceder a la siguiente página se ejecutará el jupyter notebook, incluyendo la extensión RISE si la colocaste en los requirements.txt:

https://mybinder.org/v2/gh/nombre_usuario/nombre_repositorio/nombre_rama?filepath=ruta_carpetas/nombre_archivo.ipynb

Exporta a html

Para generar un html funcional de las diapositivas, tienes que hacer en el terminal:

jupyter nbconvert --to slides ruta_carpeta/nombre_archivo.ipynb

donde ruta_carpeta/nombre_archivo es, por supuesto, la ruta a tu notebook-presentación.

Se generará un archivo html estático de tu presentación, con el nombre ruta_carpeta/nombre_archivo.slides.html. Esta página web en html puedes visualizarse en el navegador sin mayores dependencias, pero donde no podrás editar o ejecutar las celdas. Si ya realisaste tu presentación, puedes guardarla en el repositorio como un respaldo adicional.

Exporta a pdf

Para generar la presentación en pdf se requieren 3 pasos:

Genera las diapositivas en html, usando nbconvert, para que queden "activas":
```
jupyter nbconvert --to slides ruta_carpeta/nombre_archivo.ipynb --post serve
```
Se abrirá una página web en el navegador, en la dirección http://127.0.0.1:8000/nombre_archivo.slides.html#/
Edita la ruta, para que sea http://127.0.0.1:8000/nombre_archivo.slides.html?print-pdf. Nota que hay que reemplazar #/ por ?print-pdf. La página mostrará ahora las diapositivas de manera vertical.
Finalmente, guarda la página web como pdf. Puedes jugar con distintas opciones según necesites (sin márgenes, activar imágenes de fondo, etc.)

La documentación oficial para exportar a pdf está acá.

¿Cómo configuro el diseño de RISE?

General

Todas las configuraciones de RISE se realizan editando la metadata del notebook. Para ello, tienes que ir a Edit/Edit notebook metadata y agregar la(s) opcion(es) deseadas.

Metadata

La metadata es un diccionario json con las distintas opciones de todo el notebook. Por defecto, no trae ninguna opción cargada de RISE. Por eso, tenemos que agregar las opciones que se quieren configurar:

"rise": {
             "opcion_1": valor_opcion_1,
                      ...
             "opcion_n": valor_opcion_n,
         }
`

Observación importante:

Cada vez que editas la metadata, es necesario cerrar (apagar) el notebook y volver a abrirlo para que se recarguen las opciones.

Lanzar RISE de manera automática

Permite que al activar un jupyter notebook, este se ejecute en modo presentación de manera automática. ¡Opción ampliamente recomendada!

En la metadata del notebook se agrega la opción de "autolaunch" con valor true (todo en minúsculas, ¡es verdadero de javascript, no de Python!):

"rise": {"autolaunch": true}
`

De esta manera, si publicas tu jupyter notebook con mybinder.org, se mostrará en modo presentación automáticamente (audiencia no necesitará saber donde está el botón de “iniciar presentación", por ejemplo si lo compartes en mybinder).

Metadata

Eligiendo un tema

El tema de la presentación controla el aspecto general de la presentación.

En la metadata del notebook se agrega la opción de "theme" con el nombre del tema deseado:

"rise": {"theme": "sky"}
`

Existen 11 opciones, que se heredan de la librería revealjs:

black: Fondo negro, letras blancas, links azules.
white: Fondo blanco, letras negras, links celestes.
league: Fondo gris, letras blancas, links celestes.
sky: Fondo celeste, letras oscuras, links azules.
beige: Fondo beige, letras oscuras, links cafés.
simple: Fondo blanco, letras negras, links azules.
serif: Fondo café, letras grises, links cafés.
night: Fondo negro, letras blancas, links naranjos.
blood: Fondo oscuro, letras blancas, links rojos.
moon: Fondo azul oscuro, letras grises, links azules.
solarized: Fondo blanco crema, letras verde oscuro, links azules.

Se pueden comparar los temas en la siguente imagen:

Themes

La imagen fue compilada por el siguiente blog.

Eligiendo una transición

El tipo de transición entre slides se define de manera similar. En la metadata del notebook se agrega la opción de "transition" con el nombre de la transición deseada:

"rise": {"transition": "zoom"}

Las opciones, heredadas de las transiciones existentes en la librería revealjs, son:

none: Sin animación.
fade: Animar con Cross fade — default for background transitions
slide: Slide between backgrounds — default for slide transitions
convex: Animar con ángulo convexo.
concave: Animar con ángulo convexo.
zoom: Animar para que la diapositiva siguiente crezca desde el centro de la pantalla.

El siguiente gif muestra cada transición:

Transitions

Definiendo una imagen de fondos

Simplemente, usar:

"rise": {
     "backimage": "mybackimage.png",
 }
}

Esta opción es útil si quieres un fondo personalizado, como a veces se exige en algunos congresos. Como es habitual al manejar imágenes, conviene usar archivos png con fondo transparente para que se integre bien con el theme elegido.

Definiendo header y footer:

Simplemente, usar:

"rise": {
     "header": "<h1>Hola</h1>",
     "footer": "<h3>Mundo</h3>"
 }
}

Puedes usar <br> y   para introducir saltos de línea y espacios en blanco, respectivamente.

¿Cómo activo la pizarra?

Es posible activar una pizarra (chalkboard) para realizar anotaciones durante la presentación.

Para eso, en Edit/Edit Notebook Metadata, es necesario agregar el siguiente texto a la metadata del jupyter notebook:

{
 ...
 "rise": {"enable_chalkboard": true}
}

Durante la presentación se puede utilizar la pizarra haciendo click en los íconos, que permiten dibujar en una pizarra o sobre las diapositivas.

Es posible cambiar de color de lapiz presionando s y q. Se puede borrar la pizarra con -.

Las anotaciones se preservan incluso al cerrar el modo presentación. Sin embargo, no se guardan al cerrar el notebook.

Importante consejo final

Tantas opciones pueden ser sobrecogedoras y difíciles de recordar. Como no se puede tener comentarios en un json, resulta práctico tener guardadas todas las opciones y simplemente agregar un _ antes de las opciones que no se desean usar.

En mi caso, tengo el siguiente json en todos mis notebooks con lo cual no tengo que memorizar nada, y sólo adapto según necesito.

"rise": {
        "autolaunch": true,
        "enable_chalkboard": true
        "theme": "black",
        "transition": "zoom",
        "_header": "<h1>PRESENTATION NAME // EVENTs</h1>",
        "_footer": "<h3>NAME, DATE</h3>",
        "_backimage": "path/to/mybackimage.png",
        "_theme_options": [ "black", "white", "league", "beige", 
                           "sky", "night", "serif"], 
        "_transition_options": ["none", "fade", "slide", "convex", "concave", "zoom"],
        }

Esta es la parte 1 de 3 del tutorial de presentaciones interactivas en jupyter notebook.

¿Qué es RISE?

RISE es una extensión a jupyter notebook que, en lugar de desplegar las celdas en una larga página web, las despliega en una presentación usando la librería de javascript reveal.js.

Sigue siendo una página web (al igual que el notebook), pero las celdas se agrupan en diapositivas.

¿Qué contenido puedo poner?

Puedes mezclar contenido usando las celdas de markdown y código, según necesites:

Markdown: texto, latex, imágenes, tablas, etc.
Código: código, gráficos simples o interactivos, videos, sonido, iframes, javascript, entre otros.

Como regla general, si se muestra correctamente en el notebook, se verá bien en la diapositiva. ¡Sé creativo!

¿Cómo instalar?

La instalación de la extensión RISE es extremadamente fácil. Basta con usar pip o conda:

pip install rise

o

conda install -c conda-forge rise

Eso hará que se agregue el botón de iniciar presentación (destacado en rojo).

También puedes agregar rise a tu archivo requirements.txt para que se instale automáticamente al generar un ambiente.

En caso de tener problemas, revisa los detalles adicionales de instalación.

¿Cómo configurar lo que está en cada diapositivas?

Paciencia, se requiere todavía un paso adicional.

En el menú de jupyter notebook, es necesario seleccionar View/Cell Toolbar/Slideshow para que permita configurar el tipo de celda para diapositiva.

Esto se requiere porque a cada celda del notebook se le agregará metadata para saber en que diapositiva debe ir (o si se debe saltar).

Eso dejará todo configurado para poder seleccionar el tipo de celda respecto a la diapositiva.

¿Cómo moverse por las slides?

Al hacer click en el botón "Iniciar presentación", la presentación se iniciará en la celda que esté activa.

Se accede a la próxima diapositiva o fragmento con Espacio (o la flecha derecha).
Se retrocede a la diapositiva o fragmento anterior con Shift Espacio (o la flecha izquierda).
Se avanza a la proxima sub-diapositiva con Page Up.
Se retrocede la sub-diapositiva anterior con Page Down.

Una diferencia de una presentación típica de PowerPoint es que existen 2 dimensiones: las diapositivas (slides) que avanzan de izquierda a derecha como es tradicional, pero también sub-diapositivas (subslides) que son slides opcionales y que avanzan de arriba a abajo.

Observación: En general, es dificil recordar el orden de las slides y sub-slides. Yo personalmente nunca uso sub-slides por esta razón y prefiero solo tener orden "horizontal".

¿Cómo se configuran las diapositivas?

Existen varios tipos de celda con distintas funcionalidades:

-: valor por defecto. La celda se muestra con la slide anterior.
Slide: inicia una nueva diapositiva (dirección horizontal).
Sub-slide: iniciar una nueva sub-diapositiva (dirección vertical).
Fragment: se concatena a la celda anterior, pero no se muestra inmediatamente.
Skip: no se muestra la celda en las diapositivas.
Notes: No se muestra en las diapositivas, sólo se muestra en las notas para el presentador.

¿Qué opciones hay?

Existen múltiples funcionalides accesibles con el teclado durante la presentación, pero las principales a recordar son:

?: ver todos los shortcuts.
,: ocultar los botones.
\: poner la pantalla en negro. Útil para discutir algo sin distracciones visuales.
``:

Las funcionalidades se controlan con los siguientes botones:

¿Se puede editar durante la presentación?

¡Sí!

Es posible editar y ejecutar las celdas de markdown y de código durante la presentación.

Se usa el mismo sistema de doble click para acceder a modo edición, y Alt Enter para ejecutarla.

¿Cómo controlo el tamaño?

Un problema común es que al conectar el computador a otra pantalla o datashow, no se alcanza a ver en la diapositiva todo el código, texto o imagen.

Lo único que debes hacer es usar usar Ctrl + y Ctrl - para regular el tamaño (Command +y Command - en Mac), de la misma manera que regulas el tamaño de una página web.

¿Dónde están las notas del presentador?

Puedes abrir las notas del presentador presionando t.

Para poder usar las notas del presentador necesitas tener al menos 2 pantallas: una pública para compartir y otra para mantener privada.

Comparte tu estructura

Cuando se ejecuta código en una presentación, es una buena práctica mostrar la estructura de carpetas y los archivos con los que se va a trabajar. Eso ayudará a despejar dudas de cómo está funcionando el código. Esto se puede lograr fácilmente con comando mágicos (como %ls) o ejecutando código en bash (como !ls). La diferencia entre ambos radica en lo siguiente:

Los comandos mágicos son específicos y definidos por cada kernel. Pueden existir comandos que estén en python pero no en R.
Los ! permiten ejecutar instrucciones en el terminal y es más flexible. Uno de los más comunes es ofrecer instalar las librerías, como:
```
pip install rise matplotlib
```

Gráficos

Para mostrar gráficos resulta práctico que no se genere una ventana adicional, sino que se agreguen a la celda de resultados. Esta es una práctica común en jupyter notebook/lab, pero es más importante aún al pensar en las diapositivas.

%matplotlib inline
from matplotlib import pyplot as plt
import numpy as np

with plt.xkcd():
    fig = plt.figure(figsize=(14,6))
    x = np.linspace(-5,5,num=100)
    y = np.abs(np.abs(np.sin(2*x)/x))
    plt.plot(x,y)

Apoyos gráficos

Me ha servido mucho insertar gifs en las presentaciones. Un buen gif animado es un buen compromiso entre una imagen y una película, y sirve para tener una animación que ilustre algun proceso. Existen muchos programas para grabar gifs. Una solución que me ha funcionado bien para animar gifs simples es crear un diagrama mediante una animación en PowerPoint, y después grabar un gif considerando apropiadamente los tiempos.

Eso concluye la primera parte 1 del tutorial de presentaciones interactivas en jupyter notebook.

Nota: Este documento es el preámbulo de la entrega por partes del tutorial de RISE.

APUNTES:

SONIDO
VIDEO
Widgets

Lo avanzado

IPython.Display

Audio Video HTML repl

Lo avanzado

Ipywidgets

Matpllotlib widgets

Contexto

Hoy me pidieron unir varios archivos excel en un único archivo. Tomé las siguientes convenciones:

Los archivos excel están en la carpeta in, y tienen las mismas columnas en el mismo orden.
La carpeta out tiene contendrá 2 archivos: un arhivo excel con la concatenación de todos los archivos, y una versión donde se mantuvo un único registro por rut (el último).

Solución

Pandas

import pandas as pd
from glob import glob

# Leer todos los archivos excel de la carpeta in
all_files = glob("in/*.xlsx")

# Get columns
df = pd.read_excel(all_files[0])
columns = df.columns

# Unir los archivos en una lista
df_list = []
cols_list = []
for in_file in all_files:
    print(in_file)
    df = pd.read_excel(in_file)
    df.columns = columns # Renombrar las columnas, mantener la convención del primer archivo
    df["Archivo"] = in_file
    df["#Fila"] = df.index
    df_list.append(df)

# Concatenar
df_master = pd.concat(df_list)

# Sacando duplicados considerando único rut
df_last = df_master.drop_duplicates(subset="RUT COMPLETO", keep='last')

# Guardar en excel, cada resultado en una pestaña
writer = pd.ExcelWriter('out/Franquicia_joined.xlsx', engine='xlsxwriter')
df_master.to_excel(writer, sheet_name="todos", index=False)
df_last.to_excel(writer, sheet_name="ultimo_segun_Rut", index=False)
writer.save()

Balance

Un 15 minutos, que garantiza que no hayan errores de copiado-pegado y selección. ¡Listo para reutilizar!

IPython.Display - la parte web

En IPython.display existen 23 clases que son muy prácticas para agregar interactividad a Jupyter Notebook/Lab.

Acá probamos únicamente 3 que se relacionan con la web: IFrame, HTML, Javascript.

1. Antes de: principales errores

1.1 Usando display generosamente

Mi principal aprendizaje es que IPython.display genera objetos de distintos tipos. Los objetos no se muestran o ejecutan por defecto. Si el objeto es el resultado de la celda, el objeto si se despliega o ejecuta.

Si no es el resultado de la celda, no se muestra/ejecuta, a menos que se use el método display.

Diferencias entre hermanos

Jupyter Notebook, Jupyter Lab y Google Colab no son completamente similares. Hasta ahora, lo que he visto:

En Google Colab está IPython 5.0.0. No es lo mejor para evaluar javascript. De hecho, hay funciones que no existen: alert y prompt no están.

Link interesante: https://colab.research.google.com/notebooks/snippets/advanced_outputs.ipynb#scrollTo=iXZ0xoQd2kCe

2. Páginas web

2.1 IFrame

IFrame(src, 
       width, 
       height, 
       **kwargs)

Permite insertar una página web como un IFrame (inline frame). La página debe permitirlo (no todas lo hacen). Por ejemplo, para insertar una encuesta o una referencia en un jupyter notebook o una presentación con RISE.

Métodos o atributos del objeto creado:

iframe: String con la representación HTML del objeto. No es muy útil.

from IPython.display import IFrame
IFrame("https://es.wikipedia.org/wiki/IFrame", width=800, height=400)

Para más información, ver la documentación con IFrame.?

2.2 Javascript

Javascript(data=None, 
           url=None, 
           filename=None, 
           lib=None, 
           css=None)

Carga el código javascript en la página. En el notebook, el elemento conteneder será element, y jQuery estará disponible. Contenido agregado a element serán visibles en la área de output.

Métodos o atributos del objeto creado:

metadata: Atributo string con la metadata con la que fue creado el objeto.
reaload: Método para recargar el contenido del objeto, si fue creado desde url o archivo.

from IPython.display import Javascript
Javascript('alert("¡¡Tenemos javascript!!");')

from IPython.display import Javascript
Javascript('console.log("¡¡Tenemos javascript!!");')

from IPython.display import Javascript
js_str = """
var a = 1;
console.log("JS1: a = "+a);
var b = 2;
console.log("JS1: b = " + b);
console.log("JS1: a+b = " + (a+b));
"""
Javascript(js_str)

from IPython.display import Javascript, display
js_str_1 = """
var a = 1;
console.log("JS2: a ="+a);
"""
js_str_2 = """
var b = 2;
console.log("JS2: b =" + b);
console.log("JS2: a+b=" + (a+b));
"""
js_1 = Javascript(js_str_1)
js_2 = Javascript(js_str_2)
display(js_1, js_2)

from IPython.display import Javascript
Javascript?

Init signature: Javascript(data=None, url=None, filename=None, lib=None, css=None)
Docstring:      Validate that display data is text
Init docstring:
Create a Javascript display object given raw data.

When this object is returned by an expression or passed to the
display function, it will result in the data being displayed
in the frontend. If the data is a URL, the data will first be
downloaded and then displayed.

In the Notebook, the containing element will be available as `element`,
and jQuery will be available.  Content appended to `element` will be
visible in the output area.

Parameters
----------
data : unicode, str or bytes
    The Javascript source code or a URL to download it from.
url : unicode
    A URL to download the data from.
filename : unicode
    Path to a local file to load the data from.
lib : list or str
    A sequence of Javascript library URLs to load asynchronously before
    running the source code. The full URLs of the libraries should
    be given. A single Javascript library URL can also be given as a
    string.
css: : list or str
    A sequence of css files to load before running the source code.
    The full URLs of the css files should be given. A single css URL
    can also be given as a string.
File:           /miniconda3/lib/python3.7/site-packages/IPython/core/display.py
Type:           type
Subclasses:

from IPython.display import Javascript
print("Methods:")
print(sorted([f for f in dir(Javascript) if not f.startswith('_')]))

2.3 HTML

HTML(data=None, 
     url=None, 
     filename=None, 
     metadata=None)

Observación/Consejos:

No incluir secciones de <html>, <head> o <body>.
El Javascript vive en la celda de notebook, las variables no se traspasan de una celda a otra. Ver los ejemplos al final.
En Google Colab algunas funciones de javascript no están disponibles, en particular 'alert'.

Métodos o atributos del objeto creado:

metadata: String con la metadata con la que fue creado el objeto.
reaload(): Método para recargar el contenido del objeto, si fue creado desde url o archivo.

from IPython.display import HTML
HTML("<div style='background-color:lightblue'>Este es un ejemplo.</div>")

# Ver resultado con la consola de javascript
from IPython.display import HTML
my_html = """
<script>
function button_action(value){
  var msg = 'La variable tiene valor '+ value;
  console.log(msg);
  alert(msg);
};
</script>

<div> 
Variable: 
<input type='text' id='my_input_form' value='42'> 
<button onclick='button_action(document.getElementById("my_input_form").value)'>Click</button>
</div>
"""
HTML(data=my_html)

from IPython.display import HTML
my_filename = "html/ejemplo.html"
HTML(filename=my_filename)

from IPython.display import HTML
my_url = "https://raw.githubusercontent.com/sebastiandres/2021-05-IPython-display/master/html/ejemplo.html"
HTML(url=my_url)

from IPython.display import HTML
my_html = """
<script>
var a = 1;
console.log("HTML: a ="+a);
</script>
"""
HTML(my_html)

Más información

from IPython.display import HTML
HTML?

from IPython.display import HTML
print("Methods:")
print(sorted([f for f in dir(HTML) if not f.startswith('_')]))

3. Experimentos

3.1 Experimento HTML 1:

Valores de variables no se traspasan de una celda a otra. Definiremos aen la primera celda, y trataremos de imprimir el valor de a en la celda siguiente.

from IPython.display import HTML
my_html = """
<script>
var num = 42;
console.log("HTML1A: num = " + num);
</script>
"""
HTML(my_html)

from IPython.display import Javascript
my_html = """
<script>
var b = 2;
console.log("HTML1B1: num =" + num);
console.log("HTML1B2: b =" + b);
console.log("HTML1B3: num+b=" + (num+b));
</script>
"""
HTML(my_html)

Experimento HTML 2:

Colocando varios scripts en un único html: si funciona.

from IPython.display import HTML
my_html = """
<script>
var a = 1;
console.log("HTML2A: a = "+a);
</script>

<script>
var b = 2;
console.log("HTML2B: b = "+b);
</script>

<script>
console.log("HTML2C: a+b = "+(a+b));
</script>
"""
HTML(my_html)

Experimento HTML 3:

Ejecutando varios HTMLs por separado.

from IPython.display import HTML, display
my_html = """
<script>
var a = 1;
console.log("HTM3: a = "+a);
</script>
"""
h1 = HTML(my_html)
my_html = """
<script>
var b = 2;
console.log("HTML3: b = "+b);
</script>
"""
h2 = HTML(my_html)
my_html = """
<script>
console.log("HTML3: a+b = "+(a+b));
</script>
"""
h3 = HTML(my_html)
display(h1, h2, h3) # Hay que poner todos, sino solo muestra el último

Experimento HTML 4:

El hermano pobre RISE, ¿cómo hacer presentaciones con reveal.js?

!cat body.html

<body>

<link rel="stylesheet" href="reveal.css">
<script src="reveal.js"></script>
<script src="body.js"></script>

<button id="my_button" onclick="launch_reveal()">Click me</button>

<div id="reveal_id" class="reveal">
	<div class="slides">
		<section>Slide 1</section>
		<section>Slide 2</section>
		<section>Slide 3</section>
	</div>
</div>

</body>

from IPython.display import HTML, Javascript, display
HTML(filename="body.html")

from IPython.display import HTML, Javascript, display
my_path = "https://raw.githubusercontent.com/sebastiandres/2021-05-IPython-display/master/"
my_js = Javascript(url=my_path+"body.js", lib=my_path+"reveal.js", css=my_path+"reveal.css")
my_html = HTML(filename="body.html")
display(my_js)
display(my_html)

from IPython.display import HTML, Javascript, display
my_js = """
var link = document.createElement('link');
link.rel = "stylesheet"; link.type = "text/css";
link.href = "reveal.css";
document.querySelector('head').appendChild(link);
"""
Javascript(my_js)

Experimento JS 1:

Ejecutando varios javascript por separado.

from IPython.display import Javascript
js_str_1 = """
var num = 42;
console.log("JS1A: num = " + num);
"""
Javascript(js_str_1)

from IPython.display import Javascript
js_str_2 = """
var num = 42;
var b = 2;
console.log("JS1B1: num = " + num);
console.log("JS1B2: b = " + b);
console.log("JS1B3: num+b = " + (num+b));
"""
Javascript(js_str_2)

Experimento JS 2:

Usando javascript (puro) para agregar elementos html de manera dinámica. Observación: No se usa html, sino sólo Javascript sobre el "element".

from IPython.display import Javascript
my_js = """
function button_action(value){
  console.log('La variable tiene valor '+ value);
};

element.append(`<div> 
Variable: 
<input type='text' id='my_input_form' value='42'> 
<button onclick='button_action(document.getElementById("my_input_form").value)'>Click</button>
</div>`);
"""
Javascript(my_js)

Experimento JS 3:

Usando javascript para graficar.

CURRENTLY NOT WORKING

# https://github.com/timqian/chart.xkcd
from IPython.display import Javascript
my_js = """
  const svg = document.querySelector('.line-chart')

  new chartXkcd.Line(svg, {
    title: 'Monthly income of an indie developer',
    xLabel: 'Month',
    yLabel: '$ Dollars',
    data: {
      labels:['1', '2', '3', '4', '5', '6','7', '8', '9', '10'],
      datasets: [{
        label: 'Plan',
        data: [30, 70, 200, 300, 500 ,800, 1500, 2900, 5000, 8000],
      }, {
        label: 'Reality',
        data: [0, 1, 30, 70, 80, 100, 50, 80, 40, 150],
      }]
    },
    options: {}
  });
  
  element.append(`<svg class="line-chart"></svg>`)
"""
my_lib = "https://cdn.jsdelivr.net/npm/chart.xkcd@1/dist/chart.xkcd.min.js"
Javascript(data=my_js, lib=my_lib)

Experimento JS 3:

Usando javascript para graficar.

CURRENTLY NOT WORKING

from IPython.display import Javascript
# Link: https://github.com/timqian/chart.xkcd/blob/master/examples/index.js
my_url = "https://raw.githubusercontent.com/timqian/chart.xkcd/master/examples/index.js"
my_lib = "https://cdn.jsdelivr.net/npm/chart.xkcd@1/dist/chart.xkcd.min.js"
Javascript(url=my_url, lib=my_lib)

import IPython

js_code = \
'''
let message = "Hello world!";
//document.querySelector("#output-area").appendChild(document.createTextNode(message));
element.append(document.createTextNode(message));
'''

display(IPython.display.Javascript(js_code))

import IPython

js_code = \
'''
var a = prompt("Hello", "Sebas");
alert(a);
'''

display(IPython.display.Javascript(js_code))

from IPython.display import HTML, Image

canvas_html = """
<canvas width=%d height=%d style="background-color:rgb(240,240,240)"></canvas>
<button>Guess Number</button>
<script>
var canvas = document.querySelector('canvas')
var ctx = canvas.getContext('2d')
ctx.lineWidth = %d
var button = document.querySelector('button')
var mouse = {x: 0, y: 0}
canvas.addEventListener('mousemove', function(e) {
  mouse.x = e.pageX - this.offsetLeft
  mouse.y = e.pageY - this.offsetTop
})
canvas.onmousedown = ()=>{
  ctx.beginPath()
  ctx.moveTo(mouse.x, mouse.y)
  canvas.addEventListener('mousemove', onPaint)
}
canvas.onmouseup = ()=>{
  canvas.removeEventListener('mousemove', onPaint)
}
var onPaint = ()=>{
  ctx.lineTo(mouse.x, mouse.y)
  ctx.stroke()
}
var data = new Promise(resolve=>{
  button.onclick = ()=>{
    resolve(canvas.toDataURL('image/png'))
  }
})
</script>
"""
print(canvas_html % (280, 280, 10))

def draw(filename='drawing.png', w=280, h=280, line_width=10):
  display(HTML(canvas_html % (w, h, line_width)))

draw()

<canvas width=280 height=280 style="background-color:rgb(240,240,240)"></canvas>
<button>Guess Number</button>
<script>
var canvas = document.querySelector('canvas')
var ctx = canvas.getContext('2d')
ctx.lineWidth = 10
var button = document.querySelector('button')
var mouse = {x: 0, y: 0}
canvas.addEventListener('mousemove', function(e) {
  mouse.x = e.pageX - this.offsetLeft
  mouse.y = e.pageY - this.offsetTop
})
canvas.onmousedown = ()=>{
  ctx.beginPath()
  ctx.moveTo(mouse.x, mouse.y)
  canvas.addEventListener('mousemove', onPaint)
}
canvas.onmouseup = ()=>{
  canvas.removeEventListener('mousemove', onPaint)
}
var onPaint = ()=>{
  ctx.lineTo(mouse.x, mouse.y)
  ctx.stroke()
}
var data = new Promise(resolve=>{
  button.onclick = ()=>{
    resolve(canvas.toDataURL('image/png'))
  }
})
</script>

from IPython.display import HTML
HTML(filename="drawing.html")

Probaremos los siguientes:

Imágenes
- SVG
- Image
Video
- Video
- VimeoVideo
- YoutubeVideo
Audio
- Audio
Texto o Código
- Code
- FileLink y FileLinks
- Javascript
- Latex
- Markdown
- Math
- Scribd Document
Otros
- JSON
- GEOJSon
- TextDisplayObject
- DisplayObject
- DisplayHandle
- Pretty

1. Antes de: principales errores

Mi principal aprendizaje es que lo que se genera son objetos de distintos tipos. Los objetos no se muestran por defecto. Si el objeto es el resultado de la celda, el objeto se despliega por defecto. Sino es el resultado de la celda, no se muestra.

Es posible mostrar uno o varios objetos, con la función display. Display funciona en jupyter notebook/lab, pero no en python o IPython.

from IPython.display import Audio
Audio("http://www.w3schools.com/html/horse.ogg")

from IPython.display import Audio
a = Audio("http://www.w3schools.com/html/horse.ogg")

from IPython.display import Audio, display
a = Audio("http://www.w3schools.com/html/horse.ogg")
display(a)

from IPython.display import Audio, Image, display
a = Audio("http://www.w3schools.com/html/horse.ogg")
i1 = Image(filename="2021-05-ipython-display/Python.png", width=100)
i2 = Image(filename="2021-05-ipython-display/Python.jpg", width=150)
display(a,i1,i2)

2. Diferencias Jupyter Notebook/Lab y Google Colab

En Jupyter Notebook puedes instalar cualquier versión de IPython. Acá probamos la versión 7.7; en Google Colab está instalado IPython 5.5.5, por lo que no funcionará todo.

3 Imágenes

3.1 Image

Image(data=None,
      url=None,
      filename=None,
      format=None,
      embed=None,
      width=None,
      height=None,
      retina=False,
      unconfined=False,
      metadata=None)

Métodos o atributos del objeto creado:

metadata: Atributo string con la metadata con la que fue creado el objeto.
reaload: Método para recargar el contenido del objeto, si fue creado desde url o archivo.

from IPython.display import Image
Image(filename="2021-05-ipython-display/Python.png", width=100)

from IPython.display import Image
Image(filename="2021-05-ipython-display/Python.jpg", width=150)

from IPython.display import Image
Image(filename="2021-05-ipython-display/Python.gif", width=100)

<IPython.core.display.Image object>

from IPython.display import Image
my_url = "https://raw.githubusercontent.com/sebastiandres/2021-05-IPython-display/master/images/Python.png"
Image(url=my_url, width=100)

None

from IPython.display import Image
import numpy as np
my_data = ""
a = Image(data=my_data)

Más información

from IPython.display import Image
Image?

2.18 SVG

class IPython.display.SVG(data=None,
                          url=None,
                          filename=None, 
                          metadata=None)

Un objeto SVG creado tiene los siguientes métodos o atributos:

data: Entrega los datos del SVG.
metadata: String con la metadata proporcionada en la creación.
reload: Método para recargar el SVG, si fue creado por url o filename.

from IPython.display import SVG
SVG(filename="2021-05-ipython-display/Python.svg")

from IPython.display import SVG
SVG(url="https://raw.githubusercontent.com/sebastiandres/2021-05-IPython-display/master/images/Python.svg")

from IPython.display import SVG, display
data = '<svg height="109.8461" id="svg2169" inkscape:output_extension="org.inkscape.output.svg.inkscape" inkscape:version="0.45.1" sodipodi:docbase="/home/bene/Desktop" sodipodi:docname="dessin-1.svg" sodipodi:version="0.32" version="1.0" width="110.4211" xmlns="http://www.w3.org/2000/svg" xmlns:cc="http://web.resource.org/cc/" xmlns:dc="http://purl.org/dc/elements/1.1/" xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape" xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#" xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd" xmlns:svg="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">\n  <defs id="defs2171">\n    <linearGradient id="linearGradient11301" inkscape:collect="always">\n      <stop id="stop11303" offset="0" style="stop-color:#ffe052;stop-opacity:1"/>\n      <stop id="stop11305" offset="1" style="stop-color:#ffc331;stop-opacity:1"/>\n    </linearGradient>\n    <linearGradient gradientUnits="userSpaceOnUse" id="linearGradient11307" inkscape:collect="always" x1="89.136749" x2="147.77737" xlink:href="#linearGradient11301" y1="111.92053" y2="168.1012"/>\n    <linearGradient id="linearGradient9515" inkscape:collect="always">\n      <stop id="stop9517" offset="0" style="stop-color:#387eb8;stop-opacity:1"/>\n      <stop id="stop9519" offset="1" style="stop-color:#366994;stop-opacity:1"/>\n    </linearGradient>\n    <linearGradient gradientUnits="userSpaceOnUse" id="linearGradient9521" inkscape:collect="always" x1="55.549179" x2="110.14919" xlink:href="#linearGradient9515" y1="77.070274" y2="131.85291"/>\n  </defs>\n  <sodipodi:namedview bordercolor="#666666" borderopacity="1.0" height="184.25197px" id="base" inkscape:current-layer="layer1" inkscape:cx="-260.46312" inkscape:cy="316.02744" inkscape:document-units="px" inkscape:pageopacity="0.0" inkscape:pageshadow="2" inkscape:window-height="624" inkscape:window-width="872" inkscape:window-x="5" inkscape:window-y="48" inkscape:zoom="0.24748737" pagecolor="#ffffff" width="131.10236px"/>\n  <metadata id="metadata2174">\n    <rdf:RDF>\n      <cc:Work rdf:about="">\n        <dc:format>image/svg+xml</dc:format>\n        <dc:type rdf:resource="http://purl.org/dc/dcmitype/StillImage"/>\n      </cc:Work>\n    </rdf:RDF>\n  </metadata>\n  <g id="layer1" inkscape:groupmode="layer" inkscape:label="Calque 1" transform="translate(-473.36088,-251.72485)">\n    <g id="g1894" transform="translate(428.42338,184.2561)">\n      <path d="M 99.75,67.46875 C 71.718268,67.468752 73.46875,79.625 73.46875,79.625 L 73.5,92.21875 L 100.25,92.21875 L 100.25,96 L 62.875,96 C 62.875,96 44.9375,93.965724 44.9375,122.25 C 44.937498,150.53427 60.59375,149.53125 60.59375,149.53125 L 69.9375,149.53125 L 69.9375,136.40625 C 69.9375,136.40625 69.433848,120.75 85.34375,120.75 C 101.25365,120.75 111.875,120.75 111.875,120.75 C 111.875,120.75 126.78125,120.99096 126.78125,106.34375 C 126.78125,91.696544 126.78125,82.125 126.78125,82.125 C 126.78125,82.124998 129.04443,67.46875 99.75,67.46875 z M 85,75.9375 C 87.661429,75.937498 89.8125,78.088571 89.8125,80.75 C 89.812502,83.411429 87.661429,85.5625 85,85.5625 C 82.338571,85.562502 80.1875,83.411429 80.1875,80.75 C 80.187498,78.088571 82.338571,75.9375 85,75.9375 z " id="path8615" style="opacity:1;color:#000000;fill:url(#linearGradient9521);fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:1;stroke-linecap:butt;stroke-linejoin:miter;marker:none;marker-start:none;marker-mid:none;marker-end:none;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;visibility:visible;display:inline;overflow:visible"/>\n      <path d="M 100.5461,177.31485 C 128.57784,177.31485 126.82735,165.1586 126.82735,165.1586 L 126.7961,152.56485 L 100.0461,152.56485 L 100.0461,148.7836 L 137.4211,148.7836 C 137.4211,148.7836 155.3586,150.81787 155.3586,122.53359 C 155.35861,94.249323 139.70235,95.252343 139.70235,95.252343 L 130.3586,95.252343 L 130.3586,108.37734 C 130.3586,108.37734 130.86226,124.03359 114.95235,124.03359 C 99.042448,124.03359 88.421098,124.03359 88.421098,124.03359 C 88.421098,124.03359 73.514848,123.79263 73.514848,138.43985 C 73.514848,153.08705 73.514848,162.6586 73.514848,162.6586 C 73.514848,162.6586 71.251668,177.31485 100.5461,177.31485 z M 115.2961,168.8461 C 112.63467,168.8461 110.4836,166.69503 110.4836,164.0336 C 110.4836,161.37217 112.63467,159.2211 115.2961,159.2211 C 117.95753,159.2211 120.1086,161.37217 120.1086,164.0336 C 120.10861,166.69503 117.95753,168.8461 115.2961,168.8461 z " id="path8620" style="opacity:1;color:#000000;fill:url(#linearGradient11307);fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:1;stroke-linecap:butt;stroke-linejoin:miter;marker:none;marker-start:none;marker-mid:none;marker-end:none;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;visibility:visible;display:inline;overflow:visible"/>\n    </g>\n  </g>\n</svg>'    
my_svg = SVG(data=data, metadata = "SVG creado por datos")
display(my_svg)
print(my_svg.metadata)

SVG creado por datos

Más información:

from IPython.display import SVG
SVG?

4 Video

4.1 Video

Video(data=None,
    url=None,
    filename=None,
    embed=False,
    mimetype=None,
    width=None,
    height=None,
    html_attributes='controls')

from IPython.display import Video
Video("2021-05-ipython-display/Python.webm",
      width=600,
      height=400)

from IPython.display import Video
Video("https://upload.wikimedia.org/wikipedia/commons/transcoded/b/b4/Ball_python_%28Python_regius%29_in_a_zoo.webm/Ball_python_%28Python_regius%29_in_a_zoo.webm.1080p.vp9.webm",
      width=600,
      height=400)

from IPython.display import Video
Video('2021-05-ipython-display/Python.webm', embed=True, html_attributes="no-controls muted autoplay", width=600, height=400)

Más información:

from IPython.display import Video
Video?

4.2 Vimeo Video

class VimeoVideo(id, 
                 width=400, 
                 height=300, 
                 **kwargs)

Un objeto Vimeo Video creado tiene los siguientes métodos o atributos:

iframe: String con la representación HTML del objeto.

from IPython.display import VimeoVideo, HTML
VimeoVideo(148751763, width=600, height=400)

Más información

from IPython.display import VimeoVideo
VimeoVideo?

4.3 Youtube Video

YouTubeVideo(id, 
             width=400, 
             height=300, 
             **kwargs)

Un objeto YouTube Video creado tiene los siguientes métodos o atributos:

iframe: String con la representación HTML del objeto.

from IPython.display import YouTubeVideo
YouTubeVideo("j9V78UbdzWI", width=600, height=400)

Más información

from IPython.display import YouTubeVideo
YouTubeVideo?

5 Audio

5.1 Audio

Audio(data=None, 
    filename=None, 
    url=None, 
    embed=None, 
    rate=None, 
    autoplay=False, 
    normalize=True,
    element_id=None
)

Métodos del objeto (creado):

autoplay_attr
element_id_attr
metadata
reload
src_attr

from IPython.display import Audio
Audio("2021-05-ipython-display/Python.mp3")

Audio("https://upload.wikimedia.org/wikipedia/commons/transcoded/1/13/EN-Monty_Python-GT.ogg/EN-Monty_Python-GT.ogg.mp3",
      autoplay=True,
     )

# https://pages.mtu.edu/~suits/notefreqs.html 
from IPython.display import Audio
import numpy as np

N_secs, framerate = 2, 44100
t = np.linspace(0,N_secs,framerate*N_secs)
data = np.sin(2*np.pi*440*t) # nota musical do - C
Audio(data, rate=framerate)

from IPython.display import Audio
import numpy as np

N_secs, framerate = 1, 44100
t = np.linspace(0,N_secs,framerate*N_secs)
data = np.sin(2*np.pi*440*t)
zero = np.zeros(data.shape)
dataleft = np.concatenate([zero, data, zero, zero, data, data])
dataright = np.concatenate([data, zero, zero, data, zero, data])
Audio([dataleft, dataright], rate=framerate)

Más información:

Audio?

6 Código o Texto

2.2 Code

Code(data=None, 
     url=None, 
     filename=None, 
     language=None)

Finalidad: Sirve para mostrar código de python (coloreado).
¿Cuando sería util? Tienes un archivo y quieres mostrarlo en un notebook o rise, y en lugar de usar print usas esto para que tengo colores bonitos.

from IPython.display import Code
my_code = """print(" ".join(["hola","mundo"]))
a = 3
"""
Code(my_code, language="python")

print(" ".join(["hola","mundo"]))
a = 3

from IPython.display import Code
my_code = """console.log("hola" + " " + "mundo")
var a = 3
"""
Code(my_code, language="javascript")

console.log("hola" + " " + "mundo")
var a = 3

Más información

from IPython.display import Code
Code?

2.13 Latex

Latex(data=None, 
      url=None,
      filename=None, 
      metadata=None)

Métodos o atributos del objeto creado:

metadata: Atributo string con la metadata con la que fue creado el objeto.
reaload(): Método para recargar el contenido del objeto, si fue creado desde url o archivo.

from IPython.display import Latex
Latex(r"$c = \sqrt{a^2 + b^2}$ pero $\alpha > \beta$")

from IPython.display import Latex
my_url = ""
Latex(url=my_url)

---------------------------------------------------------------------------
ValueError                                Traceback (most recent call last)
<ipython-input-21-a22c41619303> in <module>
      2 from IPython.display import Latex
      3 my_url = ""
----> 4 Latex(url=my_url)

~/.local/lib/python3.7/site-packages/IPython/core/display.py in __init__(self, data, url, filename, metadata)
    635             self.metadata = {}
    636 
--> 637         self.reload()
    638         self._check_data()
    639 

~/.local/lib/python3.7/site-packages/IPython/core/display.py in reload(self)
    665             # Deferred import
    666             from urllib.request import urlopen
--> 667             response = urlopen(self.url)
    668             data = response.read()
    669             # extract encoding from header, if there is one:

/miniconda3/lib/python3.7/urllib/request.py in urlopen(url, data, timeout, cafile, capath, cadefault, context)
    220     else:
    221         opener = _opener
--> 222     return opener.open(url, data, timeout)
    223 
    224 def install_opener(opener):

/miniconda3/lib/python3.7/urllib/request.py in open(self, fullurl, data, timeout)
    508         # accept a URL or a Request object
    509         if isinstance(fullurl, str):
--> 510             req = Request(fullurl, data)
    511         else:
    512             req = fullurl

/miniconda3/lib/python3.7/urllib/request.py in __init__(self, url, data, headers, origin_req_host, unverifiable, method)
    326                  origin_req_host=None, unverifiable=False,
    327                  method=None):
--> 328         self.full_url = url
    329         self.headers = {}
    330         self.unredirected_hdrs = {}

/miniconda3/lib/python3.7/urllib/request.py in full_url(self, url)
    352         self._full_url = unwrap(url)
    353         self._full_url, self.fragment = splittag(self._full_url)
--> 354         self._parse()
    355 
    356     @full_url.deleter

/miniconda3/lib/python3.7/urllib/request.py in _parse(self)
    381         self.type, rest = splittype(self._full_url)
    382         if self.type is None:
--> 383             raise ValueError("unknown url type: %r" % self.full_url)
    384         self.host, self.selector = splithost(rest)
    385         if self.host:

ValueError: unknown url type: ''

Más información

from IPython.display import Latex
Latex?

2.14 Markdown

Markdown(data=None, 
         url=None, 
         filename=None, 
         metadata=None)

Métodos o atributos del objeto creado:

metadata: Atributo string con la metadata con la que fue creado el objeto.
reaload(): Método para recargar el contenido del objeto, si fue creado desde url o archivo.

from IPython.display import Markdown
my_markdown = '''
## Enfasis

**This is bold text**

__This is bold text__

*This is italic text*

_This is italic text_

~~Strikethrough~~

## Otros
(c) (C) (r) (R) (tm) (TM) (p) (P) +-
"Smartypants, double quotes" and 'single quotes'

'''
Markdown(my_markdown)

from IPython.display import Markdown
Markdown("2021-05-ipython-display/markdown_example.md")

from IPython.display import Markdown
Markdown("http://github/x/y/x/markdown_example.md")

Más información

from IPython.display import Markdown
Markdown?

2.15 Math

Math(data=None, 
     url=None, 
     filename=None, 
     metadata=None)

Métodos o atributos del objeto creado:

metadata: Atributo string con la metadata con la que fue creado el objeto.
reaload(): Método para recargar el contenido del objeto, si fue creado desde url o archivo.

from IPython.display import Math
Math(r'F(k) = \int_{-\infty}^{\infty} f(x) e^{2\pi i k} dx')

Más información

from IPython.display import Math
Math?

7 Otros

2.5 FileLink

class IPython.display.FileLink(path, 
                               url_prefix='', 
                               result_html_prefix='', 
                               result_html_suffix='<br>')

Finalidad: Embeber un archivo local que pueda ser clickeado, basado en una ruta (path).
Ejemplo: Cuando tu código hace referencia a un archivo de datos o README, y quieres que pueda abrirse fácilmente. O cuando generas un output, y quieres que un usuario lo mire.

from IPython.display import FileLink
FileLink("2021-05-ipython-display/latex.txt")

from IPython.display import FileLink
FileLink("2021-05-ipython-display/latex.txt", url_prefix="url_prefix", result_html_prefix='html_prefix', result_html_suffix='html_suffix')

Más información

from IPython.display import FileLink
FileLink?

2.6 FileLinks

class IPython.display.FileLinks(path, 
                                url_prefix='', 
                                included_suffixes=None, 
                                result_html_prefix='', 
                                result_html_suffix='<br>', 
                                notebook_display_formatter=None, 
                                terminal_display_formatter=None, 
                                recursive=True)

Finalidad: Embeber un archivo local que pueda ser clickeado, basado en una ruta (path).
Ejemplo: Cuando tu código hace referencia a un archivo de datos o README, y quieres que pueda abrirse fácilmente. O cuando generas un output, y quieres que un usuario lo mire.

from IPython.display import FileLinks
FileLinks("2021-05-ipython-display")

Más información

from IPython.display import FileLinks
FileLinks?

from IPython.display import FileLinks
print("Methods:")
print(sorted([f for f in dir(FileLinks) if not f.startswith('_')]))

Methods:
['html_link_str']

2.17 Progress Bar

class IPython.display.ProgressBar(
    total, # int >0
)

Un objeto Progress Bar creado tiene los siguientes métodos o atributos:

display(): Método que permite desplegar el objeto directamente.
progress: Atributo int >0 que permite cambiar el progreso realizado, int >= 0.
update(): Método que permite actualizar el display.
metadata: Atributo string de la metadata con la que fue creado el objeto.
Me parece que reload() no se usa o no aplica en este caso.

from IPython.display import ProgressBar
pb = ProgressBar(100)
pb.progress = 42
pb.display()

from IPython.display import ProgressBar
import time

pb = ProgressBar(100)
pb.display()
for i in range(0,101,5):
    pb.progress = i # No es necesario actualizar con pb.update(), solo modificar el valor
    time.sleep(.1) # Opcional

Más información:

from IPython.display import ProgressBar
ProgressBar?

2.19 Scribd Document

ScribdDocument(id, 
               width=400, 
               height=300, 
               **kwargs)

Un objeto Scribd Document creado tiene los siguientes métodos o atributos:

iframe: String con la representación HTML del objeto.

from IPython.display import ScribdDocument
ScribdDocument(56131068, width=300, height=400)

Más información

from IPython.display import ScribdDocument
ScribdDocument?

8. Sin representación gráfica directa

2.3 Display Handle

class IPython.display.DisplayHandle(display_id=None)

Funcionalidad: Ni idea... ¿para actualizar un display??
Ejemplo: ??

from IPython.display import DisplayHandle
DisplayHandle(1) # ?

<DisplayHandle display_id=1>

Más información

from IPython.display import DisplayHandle
DisplayHandle?

from IPython.display import DisplayHandle
print("Methods:")
print(sorted([f for f in dir(DisplayHandle) if not f.startswith('_')]))

Methods:
['display', 'update']

2.4 Display Object

.. ..

Más información

from IPython.display import DisplayObject
DisplayObject?

from IPython.display import DisplayObject
print("Methods:")
print(sorted([f for f in dir(DisplayObject) if not f.startswith('_')]))

2.7 GeoJSON

GeoJSON(data : dict or list VegaLite data. Not an already-serialized JSON string.
        url_template : string - Leaflet TileLayer URL template
        layer_options : dict - Leaflet TileLayer options: http://leafletjs.com/reference.html#tilelayer-options
        url : unicode - A URL to download the data from.
        filename : unicode - Path to a local file to load the data from.
        metadata: dict - Specify extra metadata to attach to the json display object.
       )

Métodos o atributos del objeto creado:

data:
metadata:
reaload:

Mostrar un json geo

... no me funciona??

from IPython.display import GeoJSON

GeoJSON(data={
         "type": "Feature",
         "geometry": {
             "type": "Point",
             "coordinates": [-81.327, 296.038]
            }
 },
 url_template="http://s3-eu-west-1.amazonaws.com/whereonmars.cartodb.net/{basemap_id}/{z}/{x}/{y}.png",
 layer_options={
     "basemap_id": "celestia_mars-shaded-16k_global",
     "attribution" : "Celestia/praesepe",
     "minZoom" : 0,
     "maxZoom" : 18,
 })

Más información:

from IPython.display import GeoJSON
GeoJSON?

from IPython.display import GeoJSON
print("Methods:")
print(sorted([f for f in dir(GeoJSON) if not f.startswith('_')]))

2.11 JSON

JSON(
    data=None,
    url=None,
    filename=None,
    expanded=False,
    metadata=None,
    root='root',
    **kwargs,
)

from IPython.display import JSON
JSON({"name":"John", "age":31, "city":"New York"})

Más información

from IPython.display import JSON
JSON?

from IPython.display import JSON
print("Methods:")
print(sorted([f for f in dir(JSON) if not f.startswith('_')]))

2.16 Pretty

Pretty(data=None, 
       url=None, 
       filename=None, 
       metadata=None)

Métodos o atributos del objeto creado:

metadata: Atributo string con la metadata con la que fue creado el objeto.
reaload(): Método para recargar el contenido del objeto, si fue creado desde url o archivo.

Más información

from IPython.display import Pretty
Pretty?

from IPython.display import Pretty
print("Methods:")
print(sorted([f for f in dir(Pretty) if not f.startswith('_')]))

2.20 TextDisplayObject

TextDisplayObject(data=None, 
                  url=None, 
                  filename=None, 
                  metadata=None)

No parece tener un display visual para jupyter notebook/lab, es más bien una estructura genérica.

Un objeto Text Display Object creado tiene los siguientes métodos o atributos:

metadata: Atributo string con la metadata con la que fue creado el objeto.
reaload(): Método para recargar el contenido del objeto, si fue creado desde url o archivo.

from IPython.display import TextDisplayObject
TextDisplayObject("Hmm, para que será esto??")

Más información

from IPython.display import TextDisplayObject
TextDisplayObject?

from IPython.display import TextDisplayObject
print("Methods:")
print(sorted([f for f in dir(TextDisplayObject) if not f.startswith('_')]))

3. Enlaces

Documentación oficial: https://ipython.readthedocs.io/en/stable/api/generated/IPython.display.html
Archivos multimedia: https://commons.wikimedia.org/

Una de las limitaciones de jupyter notebook para crear diapositivas, es que es posible crear de columnas. Por defecto, el texto ocupa toda la pantalla, como se muestra en la próxima celda.

Lo anterior no es ideal porque sería natural mostrarr el texto y la imagen con columnas.

Sin embargo, podemos usar todas las herramientas de html.

Existen distintas opciones: float: left o display: inline-block.

Veamos las diferencias.

Ejemplo de float: left:

Texto anterior.
<div style="clear: both;">
    <div style="float: left; width: 50%; background-color:#FF0000;">UNO</div>
    <div style="float: left; width: 10%; background-color:#FFFF00;">DOS</div>
    <div style="float: left; width: 30%; background-color:#00FF00;">TRES</div>
</div>
Texto posterior.

Se muestra como:

Notar que:

Podemos poner tantas columnas como necesitemos, siempre que sumen menos de 100%. Utilizo una columna interior para separar texto de imagen.
El texto "se pega" al div, lo cual se ve bastante feo.
La opción de background-color es opcional, acá se usa sólo para mostrar donde termina cada columna.

Ejemplo de display: inline-block:

Texto anterior.
<div style="clear: both;">
    <div style="display: inline-block; width: 50%; background-color:#FF0000;">UNO</div>
    <div style="display: inline-block; width: 10%; background-color:#FFFF00;">DOS</div>
    <div style="display: inline-block; width: 30%; background-color:#00FF00;">TRES</div>
</div>
Texto posterior.

Se muestra como:

Notar que el texto "no se pega" al div como antes.

En base a lo anterior, conviene preferir display: inline-block.

¿Como funciona para texto e imágenes?

Texto anterior.
<div>
    <div style="display: inline-block;  width: 50%; background-color:#FF0000;">UNO</div>
    <div style="display: inline-block; width: 10%; background-color:#FFFF00;">DOS</div>
    <div style="display: inline-block; width: 30%; background-color:#00FF00;">
    <img src="2020-03-19-rise-columns/lore_ipsum.png" alt="LoreIpsum">
    </div>
</div>
Texto posterior.

Ahora el texto quedó alineado abajo. Esto es porque por defecto, la imagen se alinea a texto. Esto se puede combatir con la opción adicional de vertical-align: text-top; en la imagen, como se ve a continuación.

Texto anterior.
<div>
    <div style="display: inline-block;  width: 50%; background-color:#FF0000;">UNO</div>
    <div style="display: inline-block; width: 10%; background-color:#FFFF00;">DOS</div>
    <div style="display: inline-block; vertical-align: text-top; width: 30%; background-color:#00FF00;">
    <img src="2020-03-19-rise-columns/lore_ipsum.png" alt="LoreIpsum">
    </div>
</div>
Texto posterior.

También podemos alinear un video:

Texto anterior.
<div>
    <div style="display: inline-block;  width: 50%; background-color:#FF0000;">UNO</div>
    <div style="display: inline-block; width: 10%; background-color:#FFFF00;">DOS</div>
    <div style="display: inline-block; vertical-align: text-top; width: 30%; background-color:#00FF00;">
    <video src="https://github.com/sebastiandres/blog/blob/master/videos/mov_bbb.mp4?raw=true" controls></video>
    </div>
</div>
Texto posterior.

Podemos juntar todo lo anterior en un contenedor estándar de texto e imagen, donde sólo será necesario actualizar las rutas y los porcentajes de las columnas:

<div>
    <div style="display: inline-block;  width: 40%;">Lorem Ipsum Text</div>
    <div style="display: inline-block; width: 10%;"></div>
    <div style="display: inline-block; vertical-align: text-top; width: 50%;">
    <img src="2020-03-19-rise-columns/lore_ipsum.png" alt="LoreIpsum">
    </div>
</div>

y de texto y video, para reutilizarlo a futuro.

<div>
    <div style="display: inline-block;  width: 40%;">Lorem Ipsum Text</div>
    <div style="display: inline-block; width: 10%;"></div>
    <div style="display: inline-block; vertical-align: text-top; width: 50%;">
    <video src="https://github.com/sebastiandres/blog/blob/master/videos/mov_bbb.mp4?raw=true" controls></video>
    </div>
</div>

Finalmente, entonces podemos obtener el texto e imagen tal como lo queríamos:

Observación:

¿Qué más me gustaría?

Código: A pesar que puedo poner código en las columnas (código "muerto" pues se puede escribir codigo en el markdown), me gustaría más que la columna fueran una celda de python ejecutable.

Update:

Existe una extensión que permite tener 2 celdas de jupyter notebook lado a lado: split cells.

Proyectos destacados

Original

PyCon Latam 2021

Mi tercera PyCon

Tutorial de RISE

Usando jupyter notebooks para presentaciones interactivas

Experiencias del Sprint de Data Umbrella

Lo que aprendí en mi primer sprint contribuyendo a código abierto.

El detective: entre la lógica y el azar

Las raíces de la serendipia y la novela policial clásica en un cuento persa

Contenidos

¿Cómo se ponen videos en un notebook?

¿Qué es RISE?

¿Porqué es mejor?

¿Qué desventajas tiene?

Sobre el tutorial

Contenidos

¿Cómo puedo configurar texto y columnas?

Convierte tus presentaciones automáticamente

Ocultando código

¿Cómo puedo hacer actividades interactivas?

¿Cómo hacer encuestas?

Usa un teclado inalámbrico

Contenidos

¿Cómo puedo compartir la presentación?

Repositorio

mybinder

Exporta a html

Exporta a pdf

¿Cómo configuro el diseño de RISE?

General

Lanzar RISE de manera automática

Eligiendo un tema

Eligiendo una transición

Definiendo una imagen de fondos

Definiendo header y footer:

¿Cómo activo la pizarra?

Importante consejo final

Contenidos

¿Qué es RISE?

¿Qué contenido puedo poner?

¿Cómo instalar?

¿Cómo configurar lo que está en cada diapositivas?

¿Cómo moverse por las slides?

¿Cómo se configuran las diapositivas?

¿Qué opciones hay?

¿Se puede editar durante la presentación?

¿Cómo controlo el tamaño?

¿Dónde están las notas del presentador?

Comparte tu estructura

Gráficos

Apoyos gráficos

Lo avanzado

IPython.Display

Lo avanzado

Ipywidgets

Contexto

Solución

Balance

404

Pie animado

¿Cómo funciona fastpages?

Personalizando la página principal

Personalizando el favicon

Agregar nuevas páginas

Todo cobra sentido

Nica

Siglas

Aprendizajes:

Canciones pendientes

Cada santo con su milagro

Rudy de Loncoche

Gol o penal

Gustavo Adolfo se revuelve en su tumba

Santiago en 150 palabras

Examen

Contenidos

IPython.Display - la parte web

1. Antes de: principales errores

1.1 Usando display generosamente